<template>
  <div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">公户配置</div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="PublicConfigForm"
          :rules="rules"
          ref="PublicConfigForm"
          label-width="120px"
          label-position="top"
          class="demo-PublicConfigForm"
        >
          <el-row :gutter="24">
            <el-col :span="7">
              <el-form-item label="银行编号" class="text-left" prop="bankCode">
                <el-input-number
                  v-model="PublicConfigForm.bankCode"
                  placeholder="请输入"
                  :controls="false"
                  class="w-100"
                ></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item
                label="银行卡用户名"
                class="text-left"
                prop="cardName"
              >
                <el-input
                  v-model="PublicConfigForm.cardName"
                  placeholder="请输入"
                  class="w-100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="银行账号" class="text-left" prop="cardNo">
                <el-input-number
                  v-model="PublicConfigForm.cardNo"
                  placeholder="请输入"
                  :controls="false"
                  class="w-100"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="证件号" class="text-left" prop="certNo">
                <el-input
                  v-model="PublicConfigForm.certNo"
                  placeholder="请输入"
                  class="w-100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="证件类型" class="text-left" prop="certType">
                <el-select
                  v-model="PublicConfigForm.certType"
                  placeholder="请选择"
                  class="w-100"
                >
                  <el-option
                    v-for="item in certTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item
                label="统一社会信用代码"
                class="text-left"
                prop="licenceCode"
              >
                <el-input-number
                  v-model="PublicConfigForm.licenceCode"
                  placeholder="请输入"
                  :controls="false"
                  class="w-100"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="地区" class="text-left" prop="areaId">
                <el-input
                  v-model="PublicConfigForm.areaId"
                  placeholder="请输入"
                  class="w-100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="省份" class="text-left" prop="provId">
                <el-input
                  v-model="PublicConfigForm.provId"
                  placeholder="请输入"
                  class="w-100"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveCloseOrder">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CreatePublicBank, getPublicBankQuery } from "@/api/business/parameter";
import { idTest, backCodeTest } from "@/utils/regular";
export default {
  name: "EryuoaStoreProjectCommission",

  data() {
    return {
      PublicConfigForm: {
        bankCode: "",
        cardName: "",
        cardNo: "",
        certNo: "",
        certType: "",
        licenceCode: "",
        provId: "",
        areaId: "",
      },
      rules: {
        certNo: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            validator: this.checkIdTest,
            trigger: "blur",
          },
        ],
        cardNo: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            validator: this.checkCardNoTest,
            trigger: "blur",
          },
        ],
        bankCode: [{ required: true, message: "请输入", trigger: "blur" }],
        cardName: [{ required: true, message: "请输入", trigger: "blur" }],
        certType: [{ required: true, message: "请选择", trigger: "blur" }],
        licenceCode: [{ required: true, message: "请输入", trigger: "blur" }],
        provId: [{ required: true, message: "请选择", trigger: "blur" }],
        areaId: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      total: 0,
      ProjectCom: [],
      certTypeArr: [
        {
          value: "01",
          label: "身份证",
        },
        {
          value: "03",
          label: "护照",
        },
        {
          value: "06",
          label: "港澳通行证",
        },
        {
          value: "07",
          label: "台湾通行证",
        },
        {
          value: "09",
          label: "外国人居留证",
        },
        {
          value: "11",
          label: "营业执照",
        },
        {
          value: "12",
          label: "组织机构代码证",
        },
        {
          value: "14",
          label: "统一社会信用代码",
        },
        {
          value: "99",
          label: "其他",
        },
      ],
    };
  },

  created() {
    this.getPublicBank();
  },

  mounted() {},

  methods: {
    checkIdTest(rule, value, callback) {
      if (!idTest(value) && !!value) {
        callback(new Error("请输入正确证件号格式"));
      } else {
        callback();
      }
    },

    checkCardNoTest(rule, value, callback) {
      if (!backCodeTest(value) && !!value) {
        callback(new Error("请输入正确银行账号格式"));
      } else {
        callback();
      }
    },
    // 保存
    SaveCloseOrder() {
      this.$refs["PublicConfigForm"].validate((valid) => {
        if (valid) {
          this.CreatePublicBankAct();
        }
      });
    },

    resQ() {
      this.getPublicBank();
    },

    // 耳域公户配置查询
    getPublicBank() {
      this.loading = true;
      getPublicBankQuery({})
        .then((res) => {
          console.log(res, "耳域公户配置查询");
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.PublicConfigForm.bankCode = data.bankCode;
            this.PublicConfigForm.cardName = data.cardName;
            this.PublicConfigForm.cardNo = data.cardNo;
            this.PublicConfigForm.certNo = data.certNo;
            this.PublicConfigForm.certType = data.certType;
            this.PublicConfigForm.licenceCode = data.licenceCode;
            this.PublicConfigForm.provId = data.provId;
            this.PublicConfigForm.areaId = data.areaId;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CreatePublicBankAct() {
      this.loading = true;
      CreatePublicBank(this.PublicConfigForm)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.getPublicBank();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  position: relative;
  padding-bottom: 100px;
}
.ipt_iner {
  margin-top: 10px;
  .ipt_number {
    position: relative;
    .percent {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #333;
      font-size: 15px;
    }
  }
  .yuan {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    font-size: 15px;
  }
}
.el_btn_bottom {
  position: absolute;
  left: 800px;
  bottom: 20px;
}
</style>
